<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 曲线图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #chartContainer {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        #saveButton {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="chartContainer"></div>
    <button id="saveButton">保存为图片</button>

    <script>
        $(document).ready(function() {
            // 初始化 ECharts 实例
            var chart = echarts.init(document.getElementById('chartContainer'));

            // 配置图表的选项
            var option = {
                title: {
                    text: '曲线图示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    type: 'category',
                    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '销量',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20, 15]
                }]
            };

            // 使用配置项填充图表
            chart.setOption(option);

            // 保存图表为图片
            $('#saveButton').click(function() {
                var imgData = chart.getDataURL({
                    pixelRatio: 2, // 控制图像分辨率
                    backgroundColor: '#fff' // 背景色
                });

                var link = document.createElement('a');
                link.href = imgData;
                link.download = 'chart.png';
                link.click();
            });
        });
    </script>
</body>
</html>